* {
  margin: 0;
  padding: 0;
}
body {
  scrollbar-width: none;
  overflow: hidden;
}
/* .layout-limit {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100vw;
  height: 72px;
  position:fixed;
  left: 0;
  top: 0;
  z-index: 2;
  background-color: #fff;
  align-items: center;
} */

/* 头部样式 */

.header-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0 16px 0 32px;
  z-index: 10;
}
.header-logo {
  width: 68.33px;
  height: 32px;
  z-index: 1;
}

.input-box {
  position: fixed;
  display: flex;
  left: 36%;
  height: 40px;
  padding: 0;
  justify-content: center;
  align-items: center;
  outline: none;
  border: none;
}
.input-box input {
  width: 420.2px;
  height: 40px;
  outline: none;
  border: none;
}
.input-box input::placeholder {
  opacity: 0.5;
}
.right {
  display: flex;
  position: absolute;
  width: 192px;
  height: 40px;

  right: 20px;
}
.create-center {
  height: 96px;
  width: 40px;
}
.cooperation {
  height: 96px;
  width: 40px;
}
.module-container {
  display: flex;
  /* position: relative;
    display: inline-block; */
}

.module-container button {
  width: 96px;
  height: 40px;
  font-size: 16px;
  color: #333333cc;
}

.options {
  display: none;
  position: absolute;
  margin-left: 10px;
  top: 100%; /* 确保下拉框在按钮下方 */
  left: 0;
  background-color: white;
  border: 1px solid #ddd;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  z-index: 10; /* 确保它在其他内容之上 */
}
.options2 {
  display: none;
  position: absolute;
  margin-left: 100px;
  top: 100%; /* 确保下拉框在按钮下方 */
  left: 0;
  background-color: white;
  border: 1px solid #ddd;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  z-index: 10; /* 确保它在其他内容之上 */
}
.options a {
  display: block;
  padding: 8px 12px;
  text-decoration: none;
  color: black;
  font-size: 16px;
}
.options2 a {
  display: block;
  padding: 8px 12px;
  text-decoration: none;
  color: black;
  font-size: 16px;
}

.options a:hover,
.options2 a:hover {
  cursor: pointer;
}
/* button {
    border: none;
    font-size: 20px;
  } */

/* 主要内容样式 */
.content {
  display: flex;
  float: left;
  height: 2070px;
  width: 100%;
}

/* 边栏样式 */

.main-content {
  float: left;
  width: 100%;
  /* background-color: gold; */
  height: 100%;
  margin-bottom: 100px;
  overflow: auto;
}
.v {
  width: 100px;
  height: 224px;
  margin-top: 30px;
}
.gengduo {
  bottom: 0;
}
.bottom-list {
  height: 230.75px;
  width: 224px;
  bottom: 0;
  left: 0;
}
.show {
  width: 1034.75;
  float: right;
  margin-left: 237.25px;
  margin-top: 72px;
}
/* rqy样式 */
ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.selected {
  color: #333333;
  background-color: #00000008;
  border-radius: 99px;
  font-weight: 800;
}
.unselected {
  color: #333333cc;
  font-weight: 100;
  background-color: white;
}
.font-weight{
  font-weight: 800;
}

.zoom-icon {
  width: 48px;
  height: 48px;
  margin-right: 10px;
  border-radius: 10px;
}
.username {
  font-weight: 600;
  color: #333333;
  font-size: 16px;
}
.aixin {
  width: 30px;
  height: 30px;
  border-radius: 50px;
  border: 0.1px solid rgba(0, 0, 0, 0.1);
  background-color: #fff;
  font-size: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.like {
  border: 0;
  background-color: #fff;
  margin-right: 2px;
}
.like .icon{
  width: 20px;
  height: 20px;
}

/* 我的页面 */
span {
  user-select: none;
  outline: none;
}

/* 我的页面 */
.my-container {
  flex: 1;
  z-index: 1;
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
  margin-top: 72px;
  scrollbar-width: none;
  width: 1423px;
  height: 100vh;
}

.my-container::-webkit-scrollbar {
  display: none;
}

.my-title-box {
  display: flex;
  align-items: center;
  justify-content: center;
}

.my-title {
  width: 100%;
  justify-content: center;
  align-items: center;
  display: flex;
}
.mytitle-item {
  padding: 48px 0;
  display: flex;
  width: 802px;
}
.my-title.hidden {
  display: none;
}


.my-headImg {
  display: flex;
  width: 70%;
  height: 100%;
  background-color: white;
  justify-content: center;
  margin-right: 20px;
}
.my-headImg img {

  border-radius: 50%;
  border: 0.5px solid rgba(0, 0, 0, 0.1);
}

.info-part {
  width: 100%;
  position: relative;
  padding: 0 0 0 32px;
}

.info {
  width: calc(-42.66667px + 33.33333vw);
  height: 100%;
}

.my-title ul {


  float: left;
}

.my-nav {
  width: 1205px;
  height: 72px;
  color: #333333;
  font-size: 16px;
  font-weight: 600;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px 0px;
}

.nav-item {
  display: flex;
  height: 40px;
  width: 64px;
  font-size: 16px;
  align-items: center;
  justify-content: center;
  padding: 0px 16px;
}

.nav-item:hover {
  background-color: #fff;
  box-shadow: 0 0 0 4px #fff;
}

.my-nav-container {
  top: 371px;
  left: 290px;
  width: 100%;
  height: 100%;
  background-color: #fff;
  border: 1px 0 0 0;
  margin-left: 10px;
}
/* 我的--收藏页面 */

.my-nav-container-collection {

  width: 1141px;
  height: 100vh;
  border: 0;
  background-color: #fff;
}
.my-nav-container-collection ul {
  width: 100%;
  margin: auto;
  margin-left: 10px;
  column-count: 5;
  column-gap: 10px;
}
.my-nav-container-collection ul li {
  background-color: #fff;
  margin-bottom: 10px;
  border-radius: 10px;
  break-inside: avoid; /* 列里面的对象不截断 */
}
.content-img img {
  width: 90%;
  height: 90%;
  object-fit: cover;
  border-radius: 10px;
  border: 0.1px solid rgba(0, 0, 0, 0.1);
}
.content-foot-part{
  padding: 12px;
}
.content-title {
  font-weight: 500;
  margin-bottom: 8px;
  font-size: 14px;
  display: -webkit-box;
  --webkit-box-orient: vertical;
  --webkit-line-clamp: 2;
  overflow: hidden;
}
.content-title span{
  font-size: 14px;
  color: #333333;
}
.contentlist {
  display: flex;
  align-items: center;
  justify-content: center;

}
.contentlist img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin-right: 6px;
}
.contentlist-name {
  font-size: 12px;
  color: #333333cc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}
.aixin {
  color: #cecaca;
  display: flex;
  align-items: center;
}
.aixin i {
  font-size: 18px;
}
